<!DOCTYPE html>
<html>
<head>
    <title>警员训练信息</title>
    {% include 'admin/common/header.html' %}
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">警员姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="" class="layui-input">
                        </div>
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="dict-info-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="dict-info-table" lay-filter="dict-info-table"></table>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="details" style="background-color:#ffffff;min-height:225px;padding: 10px"></div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="details2" style="background-color:#ffffff;min-height:300px;padding: 5px"></div>
            </div>
        </div>
        <!--<div class="layui-card">
            <div class="layui-card-body">
                <div id="details3" style="background-color:#ffffff;min-height:400px;padding: 5px"></div>
            </div>
        </div>-->
    </div>
</div>

</body>
<script type="text/html" id="dict-type-toolbar">
</script>

<script type="text/html" id="dict-type-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="details">
        <i class="layui-icon layui-icon-transfer"></i>
    </button>
</script>


<script type="text/html" id="dict-data-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-transfer"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<script type="text/html" id="class_state">
    {{ '{{#if (d.state=== 1) { }}
    <span style="color: green">课程已完成</span>
    {{# }else if(d.state === 2){ }}
    <span style="color: blue">课程进行中</span>
    {{# }else if(d.state === 3){ }}
    <span style="color: red">课程未开始</span>
    {{# }else if(d.state > 3){ }}
    <span style="color: pink">状态未知...</span>
    {{# } }}'|safe }}
</script>

{% include 'admin/common/footer.html' %}
<script>
  layui.use(['table', 'form', 'jquery', 'popup'], function () {
    let table = layui.table
    let form = layui.form
    let $ = layui.jquery
    let popup = layui.popup

    let typeCode

    let cols = [
      [

        { title: '警员姓名', field: 'name', align: 'center' },
        { title: '警员编号', field: 'id', align: 'center' },
        { title: '课程参与状态', field: 'state',templet: '#class_state', align: 'center' },
        { title: '综合评分', field: 'score', align: 'center' },
        { title: '详情', toolbar: '#dict-type-bar', align: 'center', width: 180 }
      ]
    ]

    table.render({
      elem: '#dict-info-table',
      url: '/admin/police/data',
      page: true,
      cols: cols,
      skin: 'line',
      height: 'full-148',
      toolbar: '#dict-type-toolbar',
      defaultToolbar: [{
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      }, 'filter', 'print', 'exports']
    })



    window.refreshType = function () {
      table.reload('dict-info-table')
    }

    table.on('tool(dict-info-table)', function (obj) {

       if (obj.event === 'details') {
        window.detailsType(obj)
      }
    })

      window.detailsType = function (obj) {
      layer.open({
        type: 2,
        title: '展示详情',
        shade: 0.1,
        area: ['100%', '100%'],
        content: '/admin/police/details'
      })
    }


    table.on('toolbar(dict-info-table)', function (obj) {
      if (obj.event === 'refresh') {
        window.refreshData()
      }
    })

     form.on('submit(dict-info-query)', function (data) {
      table.reload('dict-info-table', { where: data.field })
      return false
    })




    window.refreshData = function () {
      table.reload('dict-info-table')
    }
  })


    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('details');
        var myChart = echarts.init(chartDom);
        var option;

function getVirtulData(year) {
  year = year || '2022';
  var date = +echarts.number.parseDate(year + '-01-01');
  var end = +echarts.number.parseDate(+year + 1 + '-01-01');
  var dayTime = 3600 * 24 * 100;
  var data = [];
  for (var time = date; time < end; time += dayTime) {
    data.push([
      echarts.format.formatTime('yyyy-MM-dd', time),
      Math.floor(Math.random() * 1000)
    ]);
  }
  return data;
   }
   option = {
    title: {
    top: 30,
    text: '警员访问热力分布图'
    },
    tooltip: {},
    visualMap: {
    min: 0,
    max: 1000,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 65
    },
    calendar: {
    top: 120,
    left: 30,
    right: 30,
    cellSize: ['auto', 13],
    range: '2022',
    itemStyle: {
    borderWidth: 0.75
    },
    yearLabel: { show: false }
    },
    series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: getVirtulData('2022')
    }
    };

    option && myChart.setOption(option);

    })


    layui.use(['layer', 'echarts', 'element', 'count'], function () {
    var chartDom = document.getElementById('details2');
var myChart = echarts.init(chartDom);
var option;

option = {
    title: {
    top: 15,
    text: '警员平均访问时间窗口'
    },
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        gt: 4,
        lt: 6,
        color: 'rgba(0, 0, 180, 0.4)'
      },
      {
        gt: 9,
        lt: 11,
        color: 'rgba(0, 0, 180, 0.4)'
      }
    ]
  },
  series: [
    {
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }, { xAxis: 9 }, { xAxis: 11 }]
      },
      areaStyle: {},
      data: [
        ['00:00', 12],
        ['02:00', 4],
        ['04:00', 2],
        ['06:00', 12],
        ['08:00', 26],
        ['10:00', 45],
        ['12:00', 38],
        ['14:00', 20],
        ['16:00', 23],
        ['18:00', 39],
        ['20:00', 45],
        ['22:00', 32],
        ['24:00', 12],
      ]
    }
  ]
};

option && myChart.setOption(option);})



    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('details3');
var myChart = echarts.init(chartDom);
var option;

option = {
    title: {
    top: 10,
    text: '训练课程选课情况'
    },
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: false, readOnly: false },
      restore: { show: false },
      saveAsImage: { show: false }
    }
  },
  series: [
    {
      name: '训练课程选课情况',
      type: 'pie',
      radius: [25, 150],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: '情绪采集评估' },
        { value: 38, name: '动作规范评估' },
        { value: 32, name: '动作响应评估' },
        { value: 30, name: '攻防训练评估' },
        { value: 28, name: '火灾' },
        { value: 26, name: '地震' },
        { value: 22, name: '逃逸' },
        { value: 18, name: '斗殴' }
      ]
    }
  ]
};

option && myChart.setOption(option);
    })
</script>
</html>